<script setup>
import HomeCategory from './components/HomeCategory.vue'
import HomeBanner from './components/HomeBanner.vue'
import HomeNews from './components/HomeNews.vue'
import HomeHot from './components/HomeHot.vue'
import HomeBrand from './components/HomeBrand.vue'
import HomeProduct from './components/HomeProduct.vue'
import HomeSpecial from './components/HomeSpecial.vue'
</script>

<template>
  <div class="app-body">
    <div class="home-entry">
      <div class="container">
        <HomeCategory />
        <HomeBanner />
      </div>
    </div>
    <div class="home-new"><HomeNews /></div>
    <div class="home-hot"><HomeHot /></div>
    <div class="home-brand"><HomeBrand /></div>
    <div class="home-product"><HomeProduct /></div>
    <div class="home-special"><HomeSpecial /></div>
  </div>
</template>

<style lang="scss" scoped>
.home-hot{
  .home-panel{
    padding-top: 10px;
  }
}
.home-brand{
  .home-panel{
    background-color: transparent;
    padding-bottom: 40px;
  }
}
.home-product{
  background-color: #fff;
  padding-bottom: 60px;
}
.home-special{
  .home-panel{
    background-color: transparent;
    padding-bottom: 40px;
  }
}
</style>